'use client';

import { useState } from 'react';
import { useTheme, ThemeColor, themeColorConfig } from '../context/ThemeContext';

export default function MobileMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const { themeColor, setThemeColor } = useTheme();

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  // 主题颜色选项
  const themeOptions: { color: ThemeColor; label: string }[] = [
    { color: 'orange', label: '橙色' },
    { color: 'blue', label: '蓝色' },
    { color: 'green', label: '绿色' },
    { color: 'purple', label: '紫色' },
    { color: 'red', label: '红色' },
  ];

  return (
    <div className="md:hidden">
      <button onClick={toggleMenu} className="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 bg-gray-800 bg-opacity-75 flex justify-end">
          <div className="w-64 h-full bg-white overflow-y-auto">
            <div className="p-4 border-b flex justify-between items-center">
              <span className="text-lg font-semibold text-gray-800">菜单</span>
              <button onClick={toggleMenu} className="text-gray-600 hover:text-gray-800">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            <nav className="p-4">
              <ul className="space-y-3">
                <li>
                  <a
                    href="#about"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    关于我
                  </a>
                </li>
                <li>
                  <a
                    href="#services"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    业务板块
                  </a>
                </li>
                <li>
                  <a
                    href="/projects"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    项目案例
                  </a>
                </li>
                <li>
                  <a
                    href="/career"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    职业经历
                  </a>
                </li>
                <li>
                  <a
                    href="/certifications"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    专业资质
                  </a>
                </li>
                <li>
                  <a
                    href="/skills"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    专业技能
                  </a>
                </li>
                <li>
                  <a
                    href="/faq"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    常见问题
                  </a>
                </li>
                <li>
                  <a
                    href="#contact"
                    className="block py-2 px-4 text-gray-700 hover:bg-gray-100 rounded-md"
                    onClick={toggleMenu}
                  >
                    联系方式
                  </a>
                </li>
              </ul>
              
              <div className="mt-6 border-t pt-4">
                <h3 className="text-sm font-medium text-gray-500 mb-3">选择主题</h3>
                <div className="space-y-2">
                  {themeOptions.map((option) => (
                    <button
                      key={option.color}
                      className={`flex items-center w-full py-2 px-4 rounded-md ${
                        themeColor === option.color ? 'bg-primary-50' : 'hover:bg-gray-100'
                      }`}
                      onClick={() => setThemeColor(option.color)}
                    >
                      <span
                        className="inline-block w-4 h-4 rounded-full mr-2"
                        style={{ backgroundColor: themeColorConfig[option.color].primary[500] }}
                      ></span>
                      <span className={themeColor === option.color ? 'text-primary-600' : 'text-gray-700'}>
                        {option.label}
                      </span>
                    </button>
                  ))}
                </div>
              </div>
            </nav>
          </div>
        </div>
      )}
    </div>
  );
} 